<template>
  <div class="overview-content">
    <el-row :gutter="32" class="ele">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <slot name="title" />
          <el-form ref="form" :model="sizeForm" label-width="100px" class="formDiv">
            <slot />
            <h2 class="tadle_h" />
            <slot name="footer">
              <div class="dialog-footer">
                <el-button :disabled="disabled" :type="disabled?'info' : 'primary'" @click="next">下一步</el-button>
                <el-button type="primary" @click="jump">跳过此步</el-button>
              </div>
            </slot>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: { },
  props: {
    obj: {
      type: Object
    },
    disabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      sizeForm: {},
      props: {
        tableConfig: {
          type: Object,
          required: true,
          default: () => {}
        },
        tableData: {
          type: Array,
          required: true,
          default: () => []
        }
      }
    }
  },
  methods: {
    handleClick() {

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    next() {
      this.$emit('next', false)
    },
    jump() {
      this.$emit('jump', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.formDiv{padding-left: 39px;padding-right: 39px;background: #fff;padding-top: 20px;padding-bottom: 20px;}
.dialog-footer{text-align: right;}
.ele{margin-right: 0  !important;}
.tadle_h {
  border-top: 1px solid #f2f2f2;
  margin-left: -39px;
  margin-right: -39px;
  margin-bottom: 10px;
}
</style>
<style lang="scss" >
.dialog-footer{text-align: right;}
</style>
